<!DOCTYPE html>
<html
        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" xmlns:th="http://www.thymeleaf.org"
        layout:decorate="~{base/layout}">
<div layout:fragment="content">
    <!--slider section-->
    <div class="slider_wrapper">
        <div class="slider-pro" id="my-slider">
            <div class="sp-slides">

                <div class="sp-slide">
                    <h3 class="sp-layer sp-black sp-padding hide-small-screen" data-width="80%" data-position="topRight"
                        data-horizontal="8%" data-vertical="25%" data-show-transition="right" data-hide-transition="up"
                        data-show-delay="800" data-hide-delay="100">
                        <span class="title-aaa">广东省揭阳市惠来县仙庵镇</span>——仙庵镇，隶属于广东省揭阳市惠来县东部沿海，西部与周田镇接界，南部与靖海镇接壤，东北部与汕头市潮南区为邻，东临南海。全镇辖区面积84平方千米。截至2019年末，仙庵镇户籍人口共104648人。
                        <span class="read-more"><a href="javascript:void(0);">查看更多</a></span>
                    </h3>
                </div>
                <div class="sp-slide">
                    <h3 class="sp-layer sp-black sp-padding hide-small-screen" data-width="80%" data-position="topRight"
                        data-horizontal="8%" data-vertical="25%" data-show-transition="right" data-hide-transition="up"
                        data-show-delay="800" data-hide-delay="100">
                        <span class="title-aaa">惠来仙庵数字乡村综合信息服务平台</span>
                        为响应省“数字乡村战略”，助力政府加强基层党建、提升乡村治理、便捷百姓生产生活的农村综合信息服务平台。面向基层政府提供乡村治理管理服务，面向乡村百姓提供政务公开、民事反馈等乡村一体化服务。
                        <span class="read-more"><a href="javascript:void(0);">查看更多</a></span>
                    </h3>
                </div>
            </div>
        </div>
    </div>
    <div class="main-page-container">
    <div class="container">
        <div class="col-lg-6 col-md-9 col-sm-8 col-xs-12" style="float: left;margin-top: 20px;">
            <div class="cy-title">
                <h2>乡务公开</h2>
            </div>
            <div class="filter-type-box cy-tabs" id="notice-tit1" style="margin-bottom: 0px;">
                <ul class="nav nav-tabs mb-10">
                    <li class="">
                        <a th:href="@{/village/committeeUI}"><i class="fa"></i>领导信息</a>
                    </li>
                    <li class="active">
                        <a th:href="@{/village/activitiesUI(contentType='政务公开')}"><i class="fa"></i>政务公开</a>
                    </li>
                    <li class="">
                        <a th:href="@{/village/activitiesUI(contentType='政策法规')}"><i class="fa"></i>政策法规</a>
                    </li>
                    <li class="">
                        <a th:href="@{/village/activitiesUI(contentType='办事指南')}"><i class="fa"></i>办事指南</a>
                    </li>
                    <div class="pull-right" style="margin-top: 9px;margin-right: 20px;">
                        <a th:href="@{/village/activitiesUI(contentType='政务公开')}" class="a_more" style="color: #9ba0a3;">更多>></a>
                    </div>
                </ul>
            </div>
            <div id="notice-con1">
                <div style="background-color: white; display: none; padding-right:0;"
                     class="col-xs-12 col-md-12 col-lg-12 div_news paddingLeft0 ">
                    <span style="float: left; font-size: 18px; width: 100%;">镇委书记：</span>
                    <li class=" col-xs-4" style="text-align: center; width: 100%">
                        <a th:href="@{/village/committeeDetailsUI(id=${shuji.id})}" >
                            <img th:src="@{'/images/'+ ${shuji.image} +'.jpg'}" alt="Image" style="width:146px;height:auto;margin:0 auto;">
                            <span style="display: block;font-size: 18px;margin-top: 10px;color: #4cae4c"
                                  th:text="${shuji.name}"></span>
                        </a>
                    </li>
                    <span style="float: left; font-size: 18px; width: 100%;">镇委副书记：</span>
                    <li class="ul_zfxxgk col-xs-4" th:each="villageCommittee:${villageCommitteeList2}">
                        <a th:href="@{/village/committeeDetailsUI(id=${villageCommittee.id})}"
                           th:text="${villageCommittee.name}"></a>
                    </li>
                </div>
                <div style="background-color: white; display: block;height: 348px;" class="ul_newsList">
                    <li class="cy-grid-body" th:each="activities:${vllageActivities1}" style="padding: 5px 20px;">
                        <a th:href="@{/village/activitiesDetailsUI(id=${activities.id})}"
                           th:text="${#strings.length(activities.title)>=20?#strings.substring(activities.title,0,20)+'...':activities.title}"></a>
                        <span class="span_time" th:text="${#calendars.format(activities.updateTime,'yyyy-MM-dd')}"></span>
                    </li>
                </div>
                <div style="background-color: white; display: none;height: 348px;" class="ul_newsList">
                    <li class="cy-grid-body" th:each="activities:${vllageActivities2}" style="padding: 5px 20px;">
                        <a th:href="@{/village/activitiesDetailsUI(id=${activities.id})}"
                           th:text="${#strings.length(activities.title)>=20?#strings.substring(activities.title,0,20)+'...':activities.title}"></a>
                        <span class="span_time" th:text="${#calendars.format(activities.updateTime,'yyyy-MM-dd')}"></span>
                    </li>
                </div>
                <div style="background-color: white; display: none;height: 348px;" class="ul_newsList">
                    <li class="cy-grid-body" th:each="activities:${vllageActivities3}" style="padding: 5px 20px;">
                        <a th:href="@{/village/activitiesDetailsUI(id=${activities.id})}"
                           th:text="${#strings.length(activities.title)>=20?#strings.substring(activities.title,0,20)+'...':activities.title}"></a>
                        <span class="span_time" th:text="${#calendars.format(activities.updateTime,'yyyy-MM-dd')}"></span>
                    </li>
                </div>
            </div>

        </div>
        <div class="col-lg-6 col-md-9 col-sm-8 col-xs-12" style="float: right;margin-top: 25px;">
            <div class="cy-title" style="padding-bottom: 70px">
                <h2>最新资讯</h2>
            </div>
            <div class="slider-pro" id="image-lunbo2">
                <div class="sp-slides">
                    <div class="sp-slide">
                        <a th:href="@{/village/activitiesDetailsUI(id=18)}">
                            <img th:src="@{'/images/P_dangyuan18.jpg'}" class="img-responsive" alt="Responsive image">
                            <p style="display: block;width: 100%;height: 40px;position: absolute;bottom: 0;left: 0;background-color: rgba(0,0,0,0.5);font: 16px/40px '微软雅黑'; color: #fff;text-align: left;padding-left: 15px;margin-bottom: 0px;">
                                惠来县公安局开展“公安心向党、奋进新征程”党日活动</p>
                        </a>
                    </div>
                    <div class="sp-slide">
                        <a th:href="@{/party/activitiesDetailsUI(id=4)}">
                            <img th:src="@{'/images/P_dangjian04.jpg'}" class="img-responsive" alt="Responsive image">
                            <p style="display: block;width: 100%;height: 40px;position: absolute;bottom: 0;left: 0;background-color: rgba(0,0,0,0.5); font: 16px/40px '微软雅黑'; color: #fff;text-align: left;padding-left: 15px;margin-bottom: 0px;">
                                仙庵镇：精心组织、火力全开、全域推进“一村一党建辅导员”工作</p>
                        </a>
                    </div>
                    <div class="sp-slide">
                        <a th:href="@{/village/activitiesDetailsUI(id=3)}">
                            <img th:src="@{'/images/P_dangyuan03.jpg'}" class="img-responsive" alt="Responsive image">
                            <p style="display: block;width: 100%;height: 40px;position: absolute;bottom: 0;left: 0;background-color: rgba(0,0,0,0.5);font: 16px/40px '微软雅黑'; color: #fff;text-align: left;padding-left: 15px;margin-bottom: 0px;">
                                【百姓宣讲】丰收季，感党恩，一起看惠来最美“丰”景</p>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="main-cont">
                <div class="tab-content">
                    <div class="tab-pane active" id="c011">
                        <div id="oc-news1" class="owl-carousel owl-theme">
                            <div class="item">
                                <div class="cy-news-post clearfix">
                                    <a th:href="@{/party/activitiesUI(contentType='党员活动')}"><img
                                            class="image_fade"
                                            th:src="@{'/images/lunbo_dangwu.jpg'}"
                                            alt="Image"></a>
                                </div>
                            </div>
                            <div class="item">
                                <div class="cy-news-post clearfix">
                                    <a th:href="@{/village/feedback/reportUI}"><img
                                            class="image_fade"
                                            th:src="@{'/images/lunbo_minshi.jpg'}"
                                            alt="Image"></a>
                                </div>
                            </div>
                            <div class="item">
                                <div class="cy-news-post clearfix">
                                    <a th:href="@{/information/recruitmentListUI}"><img
                                            class="image_fade"
                                            th:src="@{'/images/lunbo_zhaogong.jpg'}"
                                            alt="Image"></a>
                                </div>
                            </div>
                            <div class="item">
                                <div class="cy-news-post clearfix">
                                    <a th:href="@{/village/activitiesUI(contentType='政务公开')}"><img
                                            class="image_fade"
                                            th:src="@{'/images/lunbo_xiangwu.jpg'}"
                                            alt="Image"></a>
                                </div>
                            </div>
                            <div class="item">
                                <div class="cy-news-post clearfix">
                                    <a th:href="@{/}"><img
                                            class="image_fade"
                                            th:src="@{'/images/lunbo_fangwu.jpg'}"
                                            alt="Image"></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-6 col-md-9 col-sm-8 col-xs-12" style="float: left;margin-top: 20px;">
            <div class="cy-title" style="padding-bottom: 70px">
                <h2>最新资讯</h2>
            </div>
            <div class="slider-pro" id="image-lunbo">
                <div class="sp-slides">
                    <div class="sp-slide">
                        <a th:href="@{/village/activitiesDetailsUI(id=14)}">
                            <img th:src="@{'/images/V_xiangfeng01.jpg'}" class="img-responsive" alt="Responsive image">
                            <p style="display: block;width: 100%;height: 40px;position: absolute;bottom: 0;left: 0;background-color: rgba(0,0,0,0.5); font: 16px/40px '微软雅黑'; color: #fff;text-align: left;padding-left: 15px;margin-bottom: 0px;">
                                【推进乡村文明发展】仙庵镇浮埔村努力美化环境 废地变公园 村民乐陶陶</p>
                        </a>
                    </div>
                    <div class="sp-slide">
                        <a th:href="@{/village/activitiesDetailsUI(id=16)}">
                            <img th:src="@{'/images/V_nongji01.jpg'}" class="img-responsive" alt="Responsive image">
                            <p style="display: block;width: 100%;height: 40px;position: absolute;bottom: 0;left: 0;background-color: rgba(0,0,0,0.5);font: 16px/40px '微软雅黑'; color: #fff;text-align: left;padding-left: 15px;margin-bottom: 0px;">
                                惠来县开展精勤农民培训</p>
                        </a>
                    </div>
                    <div class="sp-slide">
                        <a th:href="@{/village/activitiesDetailsUI(id=13)}">
                            <img th:src="@{'/images/V_huinong01.jpg'}" class="img-responsive" alt="Responsive image">
                            <p style="display: block;width: 100%;height: 40px;position: absolute;bottom: 0;left: 0;background-color: rgba(0,0,0,0.5);font: 16px/40px '微软雅黑'; color: #fff;text-align: left;padding-left: 15px;margin-bottom: 0px;">
                                【数字乡村】惠来仙庵镇：山呼海应书写数字乡村振兴新篇章</p>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-md-9 col-sm-8 col-xs-12" style="float: right;margin-top: 20px;">
            <div class="cy-title">
                <h2>智慧党建</h2>
            </div>
            <div class="filter-type-box cy-tabs" id="notice-tit" style="margin-bottom: 0px;">
                <ul class="nav nav-tabs mb-10">
                    <li class="">
                        <a th:href="@{/party/committeeUI}"><i class="fa"></i>领导信息</a>
                    </li>
                    <li class="active">
                        <a th:href="@{/party/activitiesUI(contentType='党员活动')}"><i class="fa"></i>党员活动</a>
                    </li>
                    <li class="">
                        <a th:href="@{/party/activitiesUI(contentType='党建动态')}"><i class="fa"></i>党建动态</a>
                    </li>
                    <li class="">
                        <a th:href="@{/party/activitiesUI(contentType='三会一课')}"><i class="fa"></i>三会一课</a>
                    </li>
                    <div class="pull-right" style="margin-top: 9px;margin-right: 20px;">
                        <a th:href="@{/party/activitiesUI(contentType='党员活动')}" class="a_more" style="color: #9ba0a3;">更多>></a>
                    </div>
                </ul>
            </div>
            <div id="notice-con">
                <div style="background-color: white; display: none; padding-right:0;"
                     class="col-xs-12 col-md-12 col-lg-12 div_news paddingLeft0 ">
                    <span style="float: left; font-size: 18px; width: 100%;">镇长：</span>
                    <li class=" col-xs-4" style="text-align: center; width: 100%">
                        <a th:href="@{/village/committeeDetailsUI(id=${zhenzhang.id})}" >
                        <img th:src="@{'/images/'+ ${zhenzhang.image} +'.jpg'}" alt="Image" style="width:146px;height:auto;margin:0 auto;">
                        <span style="display: block;font-size: 18px;margin-top: 10px;color: #4cae4c"
                           th:text="${zhenzhang.name}"></span>
                        </a>
                    </li>
                    <span style="float: left; font-size: 18px; width: 100%;">副镇长：</span>
                    <li class="ul_zfxxgk col-xs-4" th:each="villageCommittee:${villageCommitteeList}">
                        <a th:href="@{/village/committeeDetailsUI(id=${villageCommittee.id})}"
                           th:text="${villageCommittee.name}"></a>
                    </li>
                </div>
                <div style="background-color: white; display: block;height: 348px;" class="ul_newsList">
                    <li class="cy-grid-body" th:each="activities:${partyActivitiesList1}" style="padding: 5px 20px;">
                        <a th:href="@{/party/activitiesDetailsUI(id=${activities.id})}"
                           th:text="${#strings.length(activities.title)>=20?#strings.substring(activities.title,0,20)+'...':activities.title}"></a>
                        <span class="span_time" th:text="${#calendars.format(activities.updateTime,'yyyy-MM-dd')}"></span>
                    </li>
                </div>
                <div style="background-color: white; display: none;height: 348px;" class="ul_newsList">
                    <li class="cy-grid-body" th:each="activities:${partyActivitiesList2}" style="padding: 5px 20px;">
                        <a th:href="@{/party/activitiesDetailsUI(id=${activities.id})}"
                           th:text="${#strings.length(activities.title)>=20?#strings.substring(activities.title,0,20)+'...':activities.title}"></a>
                        <span class="span_time" th:text="${#calendars.format(activities.updateTime,'yyyy-MM-dd')}"></span>
                    </li>
                </div>
                <div style="background-color: white; display: none;height: 348px;" class="ul_newsList">
                    <li class="cy-grid-body" th:each="activities:${partyActivitiesList3}" style="padding: 5px 20px;">
                        <a th:href="@{/party/activitiesDetailsUI(id=${activities.id})}"
                           th:text="${#strings.length(activities.title)>=20?#strings.substring(activities.title,0,20)+'...':activities.title}"></a>
                        <span class="span_time" th:text="${#calendars.format(activities.updateTime,'yyyy-MM-dd')}"></span>
                    </li>
                </div>
            </div>

        </div>

        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="cy-title">
                <h2>热门海景</h2>
                <div class="pull-right">

                    <div class="main-tabs">
                        <ul class="nav nav-tabs">
                            <li>
                                <a th:href="@{/attractions/waterscapeListUI}">更多 <i
                                        class="fa fa-angle-right"></i></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="main-cont">
                <div class="tab-content">
                    <div class="tab-pane active" id="c01">
                        <div id="oc-news" class="owl-carousel owl-theme">
                            <div th:each="waterscape:${waterscapeList}" class="item">
                                <div class="cy-news-post clearfix">
                                    <div class="entry-image">
                                        <a th:href="@{/attractions/waterscapeListUI(id=${waterscape.id})}"><img
                                                class="image_fade"
                                                th:src="@{'/images/'+ ${waterscape.image} +'.jpg'}"
                                                alt="Image"></a>
                                    </div>
                                    <div class="entry-title">
                                        <h4><a th:href="@{/attractions/waterscapeListUI(id=${waterscape.id})}"
                                               data-toggle="tooltip"
                                               data-container="body"
                                               th:title="${waterscape.name}" th:text="${waterscape.name}"></a>
                                        </h4>
                                    </div>
                                    <div class="entry-content">
                                        <p th:text="${waterscape.describe}">
                                        </p>
<!--                                        <div class="desClass" th:utext="${waterscape.describe}" style="-webkit-line-clamp: 3;overflow: hidden;display: -webkit-box;">-->
<!--                                        </div>-->
                                    </div>
                                    <ul class="entry-meta clearfix">
                                        <li th:text="${#calendars.format(waterscape.updateTime,'yyyy-MM-dd')}"><i
                                                class="fa fa-calendar"></i></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
            <div class="cy-title">
                <h2>乡镇建筑</h2>
                <div class="pull-right">

                    <div class="main-tabs">
                        <a th:href="@{/attractions/buildingListUI}">更多 <i
                                class="fa fa-angle-right"></i></a>
                    </div>
                </div>
            </div>

            <div class="main-cont">
                <div class="tab-content">
                    <div class="tab-pane active" id="cp01">
                        <div id="oc-kx" class="owl-carousel owl-theme">
                            <div th:each="building:${buildingList}" class="item">
                                <div class="cy-kx-post clearfix">
                                    <a th:href="@{/attractions/buildingDetailsUI(id=${building.id})}">
                                        <div class="entry-image">
                                            <img th:src="@{'/images/'+ ${building.image} +'.jpg'}"
                                                 alt="Image">
                                        </div>
                                        <div class="entry-content">
                                            <p th:text="${building.name}"></p>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="cy-title">
                <h2>美食分享</h2>
                <div class="pull-right">
                    <div class="main-tabs">
                        <ul class="nav nav-tabs">
                            <li>
                                <a th:href="@{/attractions/buildingListUI}">更多
                                    <i class="fa fa-angle-right"></i></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <ul class="main-cy-thesis">
                <li th:each="food:${foodList}">
                    <a th:href="@{/attractions/buildingDetailsUI(id=${food.id})}"
                       data-toggle="tooltip" data-container="body"
                       th:title="${food.name}" th:text="${food.name}">xxxxxxxxxxxx</a>
                </li>
            </ul>

            <div class="cy-title">
                <h2>景区游玩攻略</h2>
                <div class="pull-right">

                    <div class="main-tabs">
                        <ul class="nav nav-tabs">
                            <li>
                                <a th:href="@{/strategy/travelStrategyListUI}">更多 <i
                                        class="fa fa-angle-right"></i></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <ul class="main-cy-thesis">
                <li th:each="building:${buildingList}">
                    <a th:href="@{/strategy/travelStrategyDetailsUI(id=${building.id})}"
                       data-toggle="tooltip" data-container="body"
                       th:title="${building.name}" th:text="${building.name}">xxxxxxxxxxxx</a>
                </li>
            </ul>
        </div>

        <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
            <div class="cy-title">
                <h2>网站信息</h2>
            </div>
            <div class="text-center med_toppadder5">
                <img src="images/my-web-image.jpg" width="200px" alt="">
                <p class="med_toppadder10">仙庵镇人民欢迎您！</p>
            </div>
            <div class="cy-title">
                <h2>乡政府办</h2>
            </div>
            <ul class="cy-contact">
                <li><i class="fa fa-map-marker"></i> 办公地址：惠来县仙庵镇人民政府</li>
                <li><i class="fa fa-user"></i> 负责人：杨炳深</li>
                <li><i class="fa fa-phone"></i> 办公电话：0663-6780003</li>
                <li><i class="fa fa-clock-o"></i> 办公时间：8：30—17：30</li>
            </ul>
        </div>

    </div>
    </div>

    <script th:src="@{/js/jquery_min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/wow.min.js}"></script>
    <script th:src="@{/plugins/slider-pro/js/jquery.sliderPro.min.js}"></script>
    <script th:src="@{/plugins/owlcarousel/js/owl.carousel.min.js}"></script>
    <script th:src="@{/js/custom.js}"></script>
    <!--js code-->
    <script type="text/javascript">
        window.onload = function(){
            // 获取鼠标滑过或点击的标签和要切换内容的元素
            var notice_tit = document.getElementById("notice-tit");
            var notice_con = document.getElementById("notice-con");
            var divs = notice_con.getElementsByTagName("div");
            var titles = notice_tit.getElementsByTagName("li");

            var notice_tit1 = document.getElementById("notice-tit1");
            var notice_con1 = document.getElementById("notice-con1");
            var divs1 = notice_con1.getElementsByTagName("div");
            var titles1 = notice_tit1.getElementsByTagName("li");
            // 如果titles个数跟divs个数不等的话，下面代码就不用执行了
            if(titles.length != divs.length){
                return;
            }
            if(titles1.length != divs1.length){
                return;
            }
            // 遍历titles下的所有li
            for(var i=0; i<titles.length; i++){
                titles[i].id = i; //创建索引ID
                titles[i].onmouseover = function(){ //鼠标划过当前某一个选项时
                    // 清除所有li上的class
                    for(var j=0; j<titles.length; j++){
                        titles[j].className = "";
                        // divs[j].style.display = "none";
                        divs[j].style.display = "none";
                    }
                    // 设置划过当前选项为高亮显示
                    this.className = "active";
                    divs[this.id].style.display = "block";
                }
            }

            for(var i=0; i<titles1.length; i++){
                titles1[i].id = i; //创建索引ID
                titles1[i].onmouseover = function(){ //鼠标划过当前某一个选项时
                    // 清除所有li上的class
                    for(var j=0; j<titles1.length; j++){
                        titles1[j].className = "";
                        // divs[j].style.display = "none";
                        divs1[j].style.display = "none";
                    }
                    // 设置划过当前选项为高亮显示
                    this.className = "active";
                    divs1[this.id].style.display = "block";
                }
            }
        }
        $(document).ready(function () {
            $("#image-lunbo").sliderPro({
                arrows: true,
                waitForLayers: true,
                autoplay:true,
                autoplayTimeout:500,
                fade: true,
                buttons: false,
                autoScaleLayers: false,
                width: 700,
                height: 400
            });

            $("#image-lunbo2").sliderPro({
                arrows: true,
                waitForLayers: true,
                autoplay:true,
                autoplayTimeout:500,
                fade: true,
                buttons: false,
                autoScaleLayers: false,
                width: 700,
                height: 400
            });

            $('#my-slider').sliderPro({
                arrows: true,
                waitForLayers: true,
                autoplay: false,
                fade: true,
                buttons: false,
                autoScaleLayers: false,
                width: 1170,
                height: 400
            });
            $('.image_fade').hover(function () {
                $(this).filter(':not(:animated)').animate({opacity: 0.8}, 400);
            }, function () {
                $(this).animate({opacity: 1}, 400);
            });
            $("#oc-news").owlCarousel({
                margin: 30,
                nav: true,
                loop: true,
                // autoplay:true,
                // autoplayTimeout:6000,
                // autoplayHoverPause: true,
                dots: false,
                navText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'],
                responsive: {
                    0: {items: 1},
                    480: {items: 2},
                    768: {items: 3},
                    992: {items: 4}
                }
            });
            $("#oc-news1").owlCarousel({
                margin: 30,
                nav: true,
                loop: true,
                autoplay:true,
                autoplayTimeout:2000,
                autoplayHoverPause: true,
                dots: false,
                navText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'],
                responsive: {
                    0: {items: 1},
                    480: {items: 2},
                    768: {items: 3},
                    992: {items: 4}
                }
            });
            $("#oc-kx").owlCarousel({
                margin: 15,
                nav: true,
                loop: true,
                // autoplay:true,
                // autoplayTimeout:5000,
                // autoplayHoverPause: true,
                dots: false,
                navText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'],
                responsive: {
                    0: {items: 1},
                    480: {items: 2},
                    768: {items: 3},
                    992: {items: 4}
                }
            });

            setInterval(function () {
                var buy = $('.sp-previous-arrow')[0];//给你的a标签加一个id :btnBuy
                buy.click();
            }, 5000)//后面的500是以毫秒为单位。

        });
    </script>
</div>
</html>